<template>
  <div>
    <transition name="el-zoom-in-bottom">
      <div v-show="isVisible" class="editAttribute">
        <div class="u-main">
          <div class="attributeSearchForm">
            <el-table
              v-loading="loading"
              ref="utable"
              :data="propertiesData.filter(filters)"
              style="width: 100%"
              height="244"
              highlight-current-row
              border
              header-row-class-name="headRowClass"
            >
              <el-table-column
                v-for="field in fields"
                :key="fields.index"
                :prop="field.k"
                :label="field.v"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <el-input
                    v-if="rowIsEditIndex === scope.row._feature.id"
                    v-model="scope.row[field.k]"
                    clearable
                    @input="textValidate($event,field.k)"
                  />
                  <span v-if="rowIsEditIndex !== scope.row._feature.id">{{ scope.row[field.k] }}</span>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="150">
                <template slot-scope="scope">
                  <el-button type="primary" icon="el-icon-edit" circle @click="editRow(scope.row)"/>
                  <el-button
                    :disabled="rowIsEditIndex !== scope.row._feature.id || !isPassed"
                    type="success"
                    icon="el-icon-check"
                    circle
                    @click="saveEdit(scope.row)"
                  />
                  <el-button icon="el-icon-position" circle @click="handleLocate(scope.row)"/>
                  <el-button type="danger" icon="el-icon-delete" circle @click="deleteRow(scope.row)"/>

                  <!--<el-tooltip content="属性编辑" placement="top" effect="light">-->
                  <!--<el-button type="primary" icon="el-icon-edit" @click="editRow(scope.row)" circle></el-button>-->
                  <!--</el-tooltip>-->

                  <!--<el-tooltip content="保存" placement="top" effect="light">-->
                  <!--<el-button type="success" icon="el-icon-check" @click="saveEdit(scope.row)" circle></el-button>-->
                  <!--</el-tooltip>-->

                  <!--<el-tooltip content="定位" placement="top" effect="light">-->
                  <!--<el-button icon="el-icon-position" circle @click="handleLocate(scope.row)"></el-button>-->
                  <!--</el-tooltip>-->
                  <!--<el-tooltip content="删除" placement="top" effect="light">-->
                  <!--<el-button type="danger" icon="el-icon-delete" @click="deleteRow(scope.row)" circle></el-button>-->
                  <!--</el-tooltip>-->
                </template>
              </el-table-column>
            </el-table>
          </div>
          <i class="tab-pane-header-btn el-icon-close" @click="closeAttributeTable"/>
        </div>
        <div class="u-foot">
          <div class="device-filter-toolbar">
            <span class="device-filter-label">
              <b>筛选:</b>
            </span>
            <el-select v-model="queryField" class="query-select" size="mini" placeholder="请选择">
              <el-option v-for="field in fields" :key="fields.index" :label="field.v" :value="field.k"/>
            </el-select>
            <el-input v-model="query" class="filter" size="mini" placeholder="关键字搜索" clearable/>
          </div>
          <div style="float:right">
            <el-pagination
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="10"
              :pager-count="5"
              :total="allCount"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
  import { mapState } from 'vuex'
  import Clone from '@/utils/clone'
  import BoxUtil from '@/assets/js/utils/BoxUtil'

  export default {
    name: 'Index',
    data() {
      return {
        currentPage: 1, // 初始页
        pageSize: 10, // 每页的数据
        loading: false, // 加载等待框
        query: '', // 查询条件
        queryField: '', // 查询字段
        total: 0, // 总记录数
        rowIsEditIndex: undefined,
        isPassed: false
      }
    },
    methods: {
      /**
       * 更改页数
       * @param size
       */
      handleSizeChange(size) {
        this.pageSize = size
      },
      /**
       * 翻页
       * @param currentPage
       */
      handleCurrentChange(currentPage) {
        this.currentPage = currentPage
      },
      /**
       * 过滤条件
       * @param data
       * @param index
       * @param array
       * @returns {boolean}
       */
      filters(data, index, array) {
        if (data[this.queryField] && data[this.queryField] != '') {
          return data[this.queryField]
            .toLowerCase()
            .includes(this.query.toLowerCase())
        } else {
          return true
        }
      },
      /**
       * 标记表格行属性
       * @param row
       */
      editRow(row) {
        this.rowIsEditIndex = this.rowIsEditIndex ? undefined : row._feature.id
      },

      /**
       * 保存行属性
       * @param row
       */
      saveEdit(row) {
        this.rowIsEditIndex = undefined
        row._feature.properties = Clone.cloneNot(row, '_feature')
        this.$store.dispatch("sjwh/UpdateFeature",[row._feature]).then(res => {
            this.$notify({
              title: '成功',
              message: '要素(ID: ' + row._feature.id + ')保存成功!',
              type: 'success'
            })
          })
          .catch(e => {
            this.$notify({
              title: '错误',
              message: '要素(ID: ' + row._feature.id + ')保存出错!'
            })
          })
      },
      /**
       * 定位
       */
      handleLocate(row) {
  
        
      },
      /**
       * 删除数据
       * @param row
       */
      deleteRow(row) {
       
      },

      /**
       * 关闭属性表
       */
      closeAttributeTable() {
        this.$store.commit('sjwh/setEditTableVisible', false)
      },
      /**
       * @param 高亮编辑表行
       */
      setEditTableHighLightRow(ids) {
       
      },
      /**
       * 文本校验
       * @param $event
       */
      textValidate($event, field) {
        const index = this.fieldsType.findIndex(o => o.name === field)
        const f = this.fieldsType[index]
        this.isPassed = f.isRequired ? $event !== '' : true
        switch (f.type) {
          case 'DOUBLE': // double类型
          case 'INT32':
            this.isPassed = Number.isInteger($event) || $event === ''
            break
        }
      }
    },
    computed: {
      ...mapState({
        /**
         * 属性字段
         * @param state
         */
        attributes(state) {
          return state.sjwh.selectFeature
            ? state.sjwh.selectFeature.attribute
            : {}
        },
        /**
         * 属性表可见
         * @param state
         * @returns {*}
         */
        isVisible(state) {
          return state.sjwh.editTableVisible
        },
        /**
         * 属性表数据
         * @param state
         * @returns {any[]}
         */
        propertiesData(state) {
          const collection = state.sjwh.featureCollection.slice(
            (this.currentPage - 1) * this.pageSize,
            this.currentPage * this.pageSize
          )
          return collection.map(o => {
            const newClone = Clone.clone(o.properties)
            newClone['_feature'] = o
            return newClone
          })
        },
        /**
         * 总记录数
         * @param state
         * @returns {number}
         */
        allCount(state) {
          return state.sjwh.featureCollection.length
            ? state.sjwh.featureCollection.length
            : 0
        },
        /**
         * 临时存当前选中的服务的要素几何
         */
        allFeatureCollection(state) {
          return state.sjwh.featureCollection
        },
        /**
         *
         * 服务类型（点线面）
         * @param state
         */
        featureType(state) {
          return state.sjwh.selectFeature
            ? state.sjwh.selectFeature.type
            : undefined
        },

        /**
         * 要素字段类型
         */
        fieldsType(state) {
          return state.sjwh.featureFields
        },
        /**
         * map
         * @param state
         */
        map(state) {
          return state.sjwh.map
        },
        /**
         * drawContorl
         */
        drawControl(state) {
          return state.sjwh.drawControl
        }
      }),
      /**
       * 属性字典
       * @returns {*}
       */
      fields() {
        if (this.attributes) {
          try {
            const a = this.attributes === '' ? {} : JSON.parse(this.attributes)
            const array = []
            for (const k in a) {
              array.push({ k: k, v: a[k] })
            }
            return array
          } catch (e) {
            console.warn('属性字段解析出错!')
          }
        }
        return []
      }
    }
  }
</script>

<style scoped>
  .editAttribute {
    position: absolute;
    bottom: 0px;
    right: 20px;
    /* left:20px; */
    z-index: 999;
    width: calc(100% - 104px);
    height: 280px;
    color: white;
    cursor: pointer;
    /* border: 2px solid rgb(22, 133, 216); */
  }

  .editAttribute .attributeCloseBtn {
    margin-top: 0px;
  }

  .editAttribute:hover {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 15px 15px rgba(0, 0, 0, 0.22);
  }

  .editAttribute .u-main {
    height: 245px;
    background-color: rgba(255, 255, 255, 0.6);
  }

  .editAttribute .u-foot {
    height: 35px;
    background: #d9e9ff;
  }

  .editAttribute .el-table td,
  .el-table th {
    padding: 5px 0;
  }

  .editAttribute .el-input__inner {
    height: 30px;
  }

  .editAttribute .el-button {
    margin-top: 4px;
    padding: 2px 2px;
  }

  .editAttribute .filter {
    width: 150px;
  }

  .editAttribute .attributeSearcForm {
    float: right;
    margin-right: 10px;
  }

  .editAttribute .el-form-item {
    margin-bottom: 0px;
  }

  .editAttribute .headRowClass {
    color: #409eff;
    line-height: 10px;
  }

  .editAttribute .headRowClass th {
    /* background-color: #d9e9ff; */
  }

  .editAttribute .tab-pane-header-btn {
    position: absolute;
    right: -19px;
    margin: 10px;
    top: -20px;
    font-size: 16px;
    transition: transform 0.3s;
    background-color: #f44336;
    border-radius: 10px;
    color: #fff;
    padding: 2px;
    z-index: 900;
    cursor: pointer;
  }

  .editAttribute .tab-pane-header-btn {
    position: absolute;
    right: -19px;
    margin: 10px;
    top: -20px;
    font-size: 16px;
    transition: transform 0.3s;
    background-color: #f44336;
    border-radius: 10px;
    color: #fff;
    padding: 2px;
    z-index: 900;
  }

  .editAttribute .tab-pane-header-btn:hover {
    cursor: pointer;
  }

  .editAttribute .device-filter-toolbar {
    display: inline-block;
    margin-left: 10px;
  }

  .editAttribute .device-filter-label {
    color: #409eff;
    font-size: 14px;
  }

  .editAttribute .el-table__footer-wrapper,
  .el-table__header-wrapper {
    overflow: hidden;
    background: #d9e9ff;
  }

  /* .editAttribute .el-table__body tr.current-row > td {
    background: rgba(64, 158, 255, 0.25);
  } */
</style>
